<template>
  <div>
    <table-where :forms="forms" @onSubmit="onSubmit"></table-where>
    <wms-table ref="tableQuery" :tableDatas="tableDatas" @editHandle="editHandle"></wms-table>
  </div>
  <el-drawer v-model="edit" show-close :close-on-click-modal="false" size="70%">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="[titleClass]">发货单</h4>
    </template>

    <table-where :forms="editForms"></table-where>
    <edit-table ref="editTableRef" :editTbleDatas="editTbleDatas"></edit-table>
  </el-drawer>

</template>

<script setup name="发货单">
import { ref, reactive } from 'vue'
import { POSTJSON } from '@/components/utils/http'
import { objAssign } from '@/components/utils/api'
import { useWmsGlobal } from '@/store/wmsGlobal'
const wmsGlobal = useWmsGlobal()
const edit = ref(false)
const tableDatas = reactive({
  body: {
    //表数据
    head: 'OutStoreDeliver',
    url: '/OutStore/getDeliverPage',
    params: {out_store_finish:1},
    type: 'POSTJSON'
  },
  edit: {}
})

const tableQuery = ref()

const onSubmit = () => {
  tableQuery.value.getData()
}

const editTbleDatas = reactive({
  head: [
    { name: '商品名称', value: 'params',id:'g_id', type: 'input', onclick:({row})=>{
      wmsGlobal.getGoods(row.params)
      .then(data=>{
          editTbleDatas.editData[editTbleDatas.currRow] = data;
          editTbleDatas.editData[editTbleDatas.currRow].params = data.name;
          editTbleDatas.editData[editTbleDatas.currRow].g_id = data.id;
          editTbleDatas.editData[editTbleDatas.currRow].id = null;
          editTbleDatas.editData[editTbleDatas.currRow].out_store_stat = 1;
      })
    } },
    { name: '规格编号', value: 'standard_number' },
    { name: '规格名称', value: 'standard_name' },
    { name: '品牌', value: 'brand'},
    { name: '描述', value: 'note'},
    { name: '发货数量', value: 'qty', type: 'numberInput',rule: { required: true }  },
  ],
  editData: [],
  getRow: () => {
    return {
      qty: 0
    }
  }
})

const forms = reactive({
  data: tableDatas.body.params,
  rules: [],
  compValue: [
    { label: '供应商', value: 'params',id:'c_id', type: 'iconinput' ,onclick: ()=>{
      wmsGlobal.getClient(forms.data.params)
      .then(data=>{
        forms.data.c_id = data.id;
        forms.data.params = data.name;
      })
    }},
    {
      label: '新增',
      type: 'button',
      onclick: () => {
        edit.value = true
      }
    },
    { label: '查询', type: 'button', onclick: onSubmit }
  ]
})
const editForms = reactive({
  data: {out_store_finish:1},
  rules: [],
  compValue: [
    { label: '供应商', value: 'params', id:'c_id',type: 'iconinput', show: true, rule: { required: true }, onclick:()=>{
      wmsGlobal.getClient(editForms.data.params)
      .then(data=>{
        editForms.data.c_id = data.id;
        editForms.data.params = data.name;
      })
      
    } },
    { label: '经手人', value: 'e_id', type: 'select',options: wmsGlobal.wmsOptions['e_id'] },
    {label: '新增',type: 'button',onclick: () =>{
      editTbleDatas.editData.push(editTbleDatas.getRow())
    }},
    {
      label: '保存',
      type: 'button',
      onclick: () => {
        editForms.data.detail = editTbleDatas.editData
        editForms.data.out_store_finish=1;
        POSTJSON('/OutStore/addDeliver', editForms.data).then(data => {
          if (data.code ===200) {
            editForms.data = {}
            editTbleDatas.editData = []
          }
        })
      }
    },
    {label: '返回',type: 'button',onclick: () =>edit.value = false}
  ]
})
const editHandle = ({ row }) => {
  if(row.children){
    edit.value = true
    objAssign(editForms.data,row)
    editForms.data.params = row.cname;
    editTbleDatas.editData = row.children.map(item=>{
      item.params = item.gname
      return item;
    });
  }
  
}
</script>
